<template>
    <div>
        <update-info ref="upInfo"/>
        <div class="center-box">
            <section class="mar-top mar-bottom user-info dl-row-sb start">
                <div class="main-box left dl-sticky">
                    <div v-for="(item, index) in tabBars" :key="index" class="w-[100%] py-3 px-10 cursor-pointer"
                         :class="tabIndex === index ? 'bg-blue-500 text-white' : ''"
                         @click="handleTabClick(item, index)">
                        <span>{{ item.name }}</span>
                    </div>
                </div>
                <div class="main-box right">
                    <template v-if="tabIndex === 0">
                        <div class="personal-box dl-row center">
                            <el-upload
                                    :show-file-list="false"
                                    :on-success="handleSuccess"
                                    :on-error="handleError"
                                    :action="fileUploadUrl"
                                    class="avatar-uploader">
                               <!-- <img v-if="user.avatar" :src="user.avatar" title="点击上传头像" class="avatar"> -->
								<el-avatar v-if="user.avatar" shape="circle" :size="50" :src="user.avatar" title="点击上传头像" style="margin-right: 10px;"></el-avatar>
                                <!-- <img v-else :src="userImg" title="点击上传头像" class="avatar"> -->
								 <el-avatar v-else shape="circle" :size="50" icon="el-icon-user-solid" style="margin-right: 10px;"></el-avatar>
                            </el-upload>
                            <div class="text">
                                <h1>{{user.name}}</h1>
                                <div class="dl-row center">
                                    <p>{{user.phone}}</p>
                                    <ul class="sea-btn">
                                        <li>{{user.dept}}</li>
                                       <!-- <li>{{user.job}}</li> -->
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <h1 class="text-xl mar-top-20">个人信息</h1>
                        <div>
                            <div class="dl-row center list-box-01">
                                <p class="title">姓名</p>
                                <p>{{user.name}}</p>
                            </div>
                            <div class="dl-row center list-box-01">
                                <p class="title">手机号</p>
                                <p>{{user.phone}}</p>
                            </div>
                            <div class="dl-row center list-box-01">
                                <p class="title">账号</p>
                                <p>{{user.username}}</p>
                            </div>
                            <!-- <div class="dl-row center list-box-01">
                                <p class="title">所在单位</p>
                                <p>{{user.dept}}</p>
                            </div> -->
                        </div>
                        <!-- <el-button type="success" class="mar-top-20" round @click="upUser">修改信息</el-button> -->
                    </template>
                </div>
            </section>
        </div>
    </div>

</template>

<script>
    import {mapGetters} from "vuex";
    import updateInfo from './updateInfo.vue'
    import Config from '@/config';
    import {updateAvatarV2} from '@/api/user'

    export default {
        components: {updateInfo},
        data() {
            return {
                tabIndex: 0,
                userImg: require('../../assets/image/u353.png'),
                cureentName: "我的任务",
                fileUploadUrl: Config.fileUpload,
                tabBars: [
                    {
                        name: '个人信息',
                    },
                ]
            }
        },
        mounted() {

        },
        computed: {
            ...mapGetters(['user']),
        },
        methods: {
            handleTabClick(row, index) {
                this.tabs = row.tabs
                this.activeName = 'all'
                this.tabIndex = index
                this.cureentName = row.name
                if (this.tabIndex === 1 || this.tabIndex === 2 || this.tabIndex === 3) {
                    this.$refs.notice.type = this.tabIndex
                    this.$refs.notice.init();
                }
            },
            handleSuccess(response, file, fileList) {
                const params = {
                    url: file.response
                }
                updateAvatarV2(params).then(res => {
                    this.$notify({
                        title: '头像修改成功',
                        type: 'success',
                        duration: 2500
                    })
                    this.$store.dispatch('GetInfo').then(() => {
                    })
                })
            },
            // 监听上传失败
            handleError(e, file, fileList) {
                const msg = JSON.parse(e.message)
                this.$notify({
                    title: msg.message,
                    type: 'error',
                    duration: 2500
                })
            },
            upUser() {
                this.$refs.upInfo.dialog = true
                this.$refs.upInfo.form.name = this.user.name;
                this.$refs.upInfo.form.phone = this.user.phone;
            },
            upUserAfter() {
                this.$store.dispatch('GetInfo').then(() => {
                });
            }
        },
    }
</script>

<style lang="scss" scoped>
    .user-info {
        .left {
            width: 230px;
            padding: 25px 0;

            .py-3 {
                margin-bottom: 5px;
            }

            span {
                font-size: 16px;
                font-weight: 400;
                color: #545C63;
            }

            .text-white span {
                color: #ffffff;
            }

            .bg-blue-500 {
                background: #0068B6;
            }
        }

        .right {
            width: 1110px;
			min-height: calc(100vh - 516px);
        }
    }

    .personal-box {
        background: #F3F8FB;
        padding: 30px;
        border-radius: 15px 15px 15px 15px;

        img {
            margin-right: 20px;
            width: 60px;
            height: 60px;
        }

        h1 {
            font-size: 18px;
            font-weight: bold;
            color: #1A1A1A;
        }

        p {
            font-size: 12px;
            color: #999999;
            margin-right: 15px;
        }
    }

    .about-us {
        h1 {
            text-align: center;
            font-size: 22px;
            font-weight: bold;
            color: #333333;
            margin-bottom: 20px;
        }

        p {
            font-size: 16px;
            font-weight: 400;
            color: #333333;
            line-height: 30px;
            text-indent: 2em;
        }
    }
	.center-box{
		 min-height: calc(100vh - 216px);
	}
</style>
